<template>
	<view class="pressure">
		<view class="pressure-header">
			<view class="time">
				<image src="/static/index/left.png" @click="back"></image>
				{{time}}
			</view>
			<view class="bar">
				<view :style="{backgroundColor:dayBgColor}" @click="toDay">
					<text>日</text>
				</view>
				<view :style="{backgroundColor:weekBgColor}" @click="toWeek">
					<text>周</text>
				</view>
			</view>
		</view>
		<view class="pressure-content">
			<pressureDayVue v-if="ispage===1"></pressureDayVue>
			<pressureWeekVue v-if="ispage===2"></pressureWeekVue>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import pressureDayVue from './components/pressureDay.vue';
	import pressureWeekVue from './components/pressureWeek.vue';
	const ispage = ref(1);
	const dayBgColor = ref('#699CEF');
	const weekBgColor = ref(' ');
	//获取当前时间
	let date = new Date;
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let currentDay = date.getDate();
	let time = ref(year + "年" + month + "月" + currentDay + "日");
	//跳转heartDay页面方法
	function toDay() {
		// 添加背景色
		dayBgColor.value = '#699CEF';
		weekBgColor.value = ' ';
		//显示页面
		ispage.value = 1;
		//修改顶部时间
		time.value = year + "年" + month + "月" + currentDay + "日";
	}
	//跳转heartweek页面方法
	function toWeek() {
		//添加背景色
		dayBgColor.value = ' ';
		weekBgColor.value = '#699CEF';
		//显示页面
		ispage.value = 1;
		ispage.value = 2;
		// 修改顶部时间
		let weekDate = getWeekDays()
		time.value = year + "年" + weekDate[0] + "至" + weekDate[6];
	}
	//返回上一级页面
	function back() {
		uni.navigateBack({
			delta: 1
		});
	}
	//获取一周为那几天
	function getWeekDays() {
		const firstDayOffset = currentDay === 0 ? 6 : currentDay - 1;
		const firstDayOfWeek = new Date(date);
		firstDayOfWeek.setDate(date.getDate() - firstDayOffset);

		const weekDays = [];
		for (let i = 0; i < 7; i++) {
			const day = new Date(firstDayOfWeek);
			day.setDate(firstDayOfWeek.getDate() + i);
			const year = day.getFullYear();
			const month = String(day.getMonth() + 1);
			const date = String(day.getDate());
			weekDays.push(`${month}月${date}日`);
		}
		return weekDays;
	}
</script>

<style scoped>
	.pressure-header {
		padding: 60rpx 10rpx;
		width: 100%;
		height: 100rpx;
		background-color: #aac8ff;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 1000;
	}

	.time {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.time image {
		position: fixed;
		top: 50rpx;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.bar {
		width: 80%;
		height: 70rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		text-align: center;
		border-radius: 15rpx;
		background-color: #aac8ff;
		/* align-items: center; */
	}

	.bar view {
		line-height: 70rpx;
		width: 50%;
		height: 70rpx;
		border-radius: 15rpx;
	}
</style>